<template>
  <!--回看竖屏和横屏公用右侧互动组件-->
  <div :class="['interaction-right-box',{'zxjtqh-app-ios':$channel=='zxjtqh' && getPlatform=='app' && isIos && isLsPoScreen =='LscreenLive'}]">
    <ul v-if="isInviteSwicth || isYqyl" :class="isLsPoScreen =='LscreenLive'?'lscreenLive-ul':''">
      <li class="invite-btn" @click="clickInteractionRight('clickInvite')">
        <!--邀请和邀请有礼 -->
        <img :src="isInviteSwicth?inviteImg:inviteCourteousImg" alt="">
        <p>邀请</p>
      </li>
      <!-- 报名 -->
      <li v-if="videoInfo.videoInfo.checkInSw == 1" id="zhibo_baoming" @click="clickInteractionRight('applyInfo')">
        <i></i>
        <p>{{videoInfo.videoInfo.checkInBtn || '报名'}}</p>
      </li>
      <li v-for="(item, index) in qaTab" :id="qaTypeId[item.qaType]" @click="clickInteractionRight(item.type)" :key="index">
        <template v-if="item.open">
          <i></i>
          <p>{{ qaTypetoBetext[item.qaType] }}</p>
        </template>
      </li>
      <p v-if="isShowBtn" @click="arrowBtn" :class="isShow ? 'arrow-btn' : 'arrow-btn-up'">《</p>
    </ul>
    <div class="shopping-btn" v-if='shoppingData && shoppingData.goods && shoppingData.goods.goodsList.length' @click="clickInteractionRight('clickShoppingBtn')">
      <div class="shopping-btn-box" v-if="shoppingData && shoppingData.icon">
        <img :src="shoppingData.icon+ '?x-oss-process=image/resize,m_fixed,h_125,w_125'" />
      </div>
      <div v-else>
        <div class="box">
          <div class="shop-text">
            {{shoppingData.title||'一键下单'}}
          </div>
        </div>
        <div class="shop-bar1"></div>
        <div class="shop-bar2"></div>
      </div>

    </div>
    <!-- 右下活动组件 -->
    <ActiveRightBottom :dataArray='activityArrayData[3]' v-if="isActivity[3]" @formChildMsg='formChildData' />
  </div>
</template>

<script>
  import ActiveRightBottom from '@/components/activeCom/activeRightBottom';
  export default {
    props: {
      videoInfo: Object,
      isLsPoScreen: String, //横竖屏
      isInviteSwicth: Boolean, //邀请卡开关
      inviteImg: String, //邀请图片配置
      isYqyl: Boolean, //邀请有礼
      activityArray: Object, //活动数据
      isPublic: Boolean, //是否是公开直播间
      shoppingDataInfo:Object,
    },
    components: {
      ActiveRightBottom, //右下角活动
    },
    data() {
      return {
        activityArrayData: [], //活动数组
        isActivity: [false, false, false, false],
        activityTitle: '', //活动标题
        inviteCourteousImg: require('../../assets/images/live_icon/invite_courteous.png'), //邀请有礼
        getPlatform:fun.getPlatform(),
        isIos,
        isShow: true,
        isShowBtn: false, //展开收起按钮
        oldQaTab: [],
        qaTab:[],
        qaTypetoBetext: {
          //code转成文本显示出来
          "1": "",
          "2": "材料",
          "3": "纪要",
        },
        qaTypeId: { 
          "1": "zhibo_baoming",
          "2": "zhibo_cailiao",
          "3": "zhibo_jiyao",
        },
      }
    },
    created() {
      if(this.videoInfo.videoInfo.checkInSw == 1){ //报名 中奖信息
          this.qaTypetoBetext[1] = this.videoInfo.videoInfo.checkInBtn || '报名'
          this.qaTab.unshift({qaType: 1,open: true, type: "applyInfo" })
      }
      if (this.videoInfo.videoInfo.partnerType = 12) {//如果是腾讯会议创建的直播间
        //并且数据有纪要或者材料
        let haveSummary = this.videoInfo.videoInfo?.roomVideoExt2?.tcSummaryList
        let haveMaterial = this.videoInfo.videoInfo?.roomVideoExt2?.documentInfoList
        let arr = [
          { qaType: 2, open: haveSummary&&true , type: "meetingMaterial" },
          { qaType: 3, open: haveMaterial&&true , type: "meetingSummary" },
        ]
        this.qaTab.unshift(...arr)
      }
      //是否展示收缩按钮
      if (this.qaTab.some(function(item) {
          return item.open
        })) {
        this.isShowBtn = true
      }
      this.oldQaTab = this.qaTab;
    },
    computed: {
    shoppingData (){
      return this.shoppingDataInfo
    }
    },
    watch: {
      activityArray() {
        for (let i = 0; i < this.activityArray.length; i++) {
          if (this.activityArray[i].length != 0) {
            this.$set(this.isActivity, i, true); //数组，需要修改数组的第几个索引，要改的数据
          }
        }
        this.activityArrayData = this.activityArray
      },
    },
    mounted() {},
    methods: {
      formChildData(data) { //子组件传过来的数据
        switch (data.type) {
          case 'activityChildArray': //单个活动数据
            this.$emit("formChildMsg", {
              type: "activityChildArray",
              data: data.data,
              loction: 'rightBottom'
            })
            break;
          default:
            break;
        }
      },
      clickInteractionRight(type) {
          this.$emit('formChildMsg', {
            type: type
          })
      },
      //右侧按钮展开收起
      arrowBtn() {
        this.isShow = !this.isShow
        this.qaTab = this.isShow ? this.oldQaTab :[]
      },
    }
  }
</script>

<style scoped="scoped">
  .interaction-right-box {
    position: absolute;
    bottom: 110px;
    right: 10px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
  }
  .zxjtqh-app-ios{
    bottom: 190px;
  }

  .interaction-right-box ul {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin: 0 auto;
    width: 100px;
    padding-bottom: 30px;
    margin-bottom: 10px;
    padding-top: 11px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 51px;
    opacity: 0.85;
    border: 1px solid #D5D5D5;
  }

  .interaction-right-box ul.lscreenLive-ul {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 51px;
    border: 1px solid #D5D5D5;
  }

  .invite-btn {
    margin-top: 8px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .invite-btn img {
    width: 140px;
    height: 140px;
    transform:scale(0.5);
    /* border-radius: 50%; */
    margin-top: -30px;
    margin-bottom: 6px;
  }
  .invite-btn p{
    margin-top: -40px;
  }
  .interaction-right-box ul p {
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;

  }

  .interaction-right-box ul li {
    border-radius: 50%;
    margin-top: 20px;
    text-align: center;
    font-size: 42px;
    font-weight: 500;
    color: #ffffff;
    position: relative;
  }

  .interaction-right-box ul.lscreenLive-ul li p {
    color: #333333;
  }

  .interaction-right-box ul li:nth-child(1) {
    height: 80px;
    width: 80px;
  }

  .interaction-right-box ul li:nth-child(3) {
    background: #ffc228;
  }

  .shopping-btn {
    position: relative;
    margin: 10px auto 0;
  }

  .shopping-btn .box {
    width: 125px;
    height: 125px;
    background: url("../../assets/images/yjxd.png") no-repeat;
    background-size: 125px 125px;
  }

  .shopping-btn img {
    width: 125px;
    height: 125px;
  }

  .shop-text {
    width: 96px;
    height: 30px;
    background: linear-gradient(11deg, #FE9E3D, #FF965D);
    font-size: 18px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    position: absolute;
    top: 55%;
    left: 50%;
    margin-left: -48px;
  }

  .shop-bar1 {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    left: 0;
    background: url('../../assets/images/yq2.png') no-repeat;
    background-size: 100%;
    animation-name: baring;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-play-state: running;
  }

  .shop-bar2 {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -2px;
    left: 60px;
    background: url('../../assets/images/yq1.png') no-repeat;
    background-size: 100%;
    animation-name: baring;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 500ms;
    animation-play-state: running;
  }

  @keyframes baring {
    0% {
      transform: translate(0px, 0px);
    }

    50% {
      transform: translate(0px, 10px);
    }

    100% {
      transform: translate(0px, 0px);
    }
  }

  .invited {
    margin-bottom: 20px;
  }

  .invited .box {
    width: 125px;
    height: 125px;
    background: url("../../assets/images/yqyl.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -62.5px;
  }

  .yq-text {
    display: block;
    width: 96px;
    height: 30px;
    background: linear-gradient(-90deg, #fea934, #ff5973);
    border-radius: 8px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    margin: 55% auto 0;
  }
  .interaction-right-box ul li{
    display: flex;
    flex-direction: column;

  }
  .interaction-right-box ul li i{
    height: 70px;
    width: 70px;
    margin-bottom: 6px;
  }
  #zhibo_baoming i {
    background: url('../../assets/images/live_icon/baoming.png') no-repeat;
    background-size: 100% 100%;
  }
  #zhibo_cailiao i {
    background: url('../../assets/images/live_icon/matter.png') no-repeat;
    background-size: 100% 100%;
  }
  #zhibo_jiyao i {
    background: url('../../assets/images/live_icon/summary.png') no-repeat;
    background-size: 100% 100%;
  }
  .arrow-btn {
    padding-right: 26px;
    margin-bottom: 6px;
    color: rgba(153, 153, 153, 0.55);
    text-align: center;
    vertical-align: center;
    transform: rotate(270deg);
  }

  .arrow-btn-up {
    margin-bottom: 6px;
    color: rgba(153, 153, 153, 0.55);
    text-align: center;
    vertical-align: center;
    transform: rotate(90deg);
  }
</style>
